<template>
	<view>
		<view class="listItem"
			v-for="(item,index) in yhqList"
			:key="index"
		>
			<view class="itemLeft">
				<view class="itemTit">
					<!-- :class="useCls(yhqType,useStatus)" -->
					<text class="typeTag" :class="[yhqType == 'myYhq' && (useStatus == 2 || useStatus == 3) ? 'overDate' : '']">{{formatYhqType(item.type)}}</text>
					<text class="tit">{{item.events}}</text>
				</view>
				<view class="validDate">
					<text>{{item.eventSdate == undefined ? item.useSdate : item.eventSdate}}</text>
					<text class="tillTxt">至</text>
					<text>{{item.eventEdate == undefined ? item.useEdate : item.eventEdate}}</text>
				</view>
				<view class="validDate" v-if="yhqType == 'lq'">
					<text class="yxq">有效天数</text>
					<text>{{item.validDays}}天</text>
				</view>
				<view class="otherInfo" v-if="item.type == 'zx' && item.useObjName != '' && item.useObjName != undefined">使用对象：{{item.useObjName}}咨询师</view>
				<view class="otherInfo" v-if="item.type == 'cp' && item.useObjName != '' && item.useObjName != undefined">使用量表：{{item.useObjName}}</view>
				<view class="otherInfo" v-if="item.useWeekRange != ''">仅限 周{{formatWeekToCHN(item.useWeekRange)}}使用</view>
				<view class="otherInfo" v-if="item.type == 'zx' && item.useCity != ''">{{ formatUseCity(item.useCity) }}</view>
				<view class="iconfont icon-yishiyong" v-if="yhqType == 'myYhq' && useStatus == 2"></view>
			</view>
			<view class="yhqPrice" :class="[yhqType == 'myYhq' && (useStatus == 2 || useStatus == 3) ? 'overDate' : '']">
				<view class="price">
					<text class="unit">¥</text>
					<text>{{item.couponMoney}}</text>
				</view>
				<view class="xfPrice">满{{item.couponMonetary}}元使用</view>
				<template v-if="yhqType == 'lq'">
					<view class="lqStatus" :class="[item.getCouponId == 0 ? 'goLq' : 'hasChoice']" @tap="yhqLq(index,item)">{{formatLqTxt(item.getCouponId)}}</view>
				</template>
				<template v-if="yhqType == 'useYhq' && typeIndex == 0">
					<view class="lqStatus goLq hasChoice" v-if="getCouponId == item.id">已选择</view>
					<view class="lqStatus goLq" v-else @tap="goSelCurrYhq(item.id,item.couponMoney)">选择</view>
				</template>
				<template v-if="yhqType == 'myYhq'">
					<view class="lqStatus" v-if="useStatus == 1" @tap="goUseYhq(item.type)">未使用</view>
					<view class="lqStatus" v-if="useStatus == 3">已过期</view>
				</template>
			</view>
			<view class="cir rt"></view>
			<view class="cir rb"></view>
		</view>
		<template v-if="yhqType == 'myYhq'">
			<loading-view :loading="loading"></loading-view>
		</template>
	</view>
</template>

<script>
	export default {
		props:{
			yhqType:{//lq useYhq myYhq
				type:String,
				default:'lq'
			},
			yhqList:Array,
			loading:Boolean,
			getCouponId:Number,
			typeIndex:Number,
			useStatus:Number
		},
		computed:{
			formatYhqType(){
				return function(type){
					let str = '';
					if(type == 'zx'){
						str = '个体咨询'
					}else if(type == 'cp'){
						str = '个体测评'
					}
					return str;
				}
			},
			formatLqTxt(){
				return function(getCouponId){
					let str = getCouponId == 0 ? '立即领取' : '已领取'
					return str
				}
			},
			formatWeekToCHN(){
				return function(weekRange){
					let weekRangeStr = '';
					let weekRangeArr = weekRange.split(",").sort();
					weekRangeStr = weekRangeArr.map(item=>`
						${ this.util.dateToWeek(item,'week') }
					`).join("/")
					return weekRangeStr;
				}
			},
			formatUseCity(){
				return function(city){
					if(city != ''){
						return '仅限 ' + city.replace(/,/g,"/") 
					}
				}
			}
		},
		methods:{
			yhqLq(index,item){
				if(item.getCouponId == 0){
					this.$emit('yhqLq',index,item);
				}
			},
			//选择当前优惠券
			goSelCurrYhq(id,couponMoney){
				this.$emit('goSelCurrYhq',id,couponMoney);
			},
			goUseYhq(yhqType){
				this.$emit('goUseYhq',yhqType);
			}
		}
	}
</script>

<style lang="scss" scoped>
	.listItem{
		display: flex;
		justify-content: space-between;
		background: #fff;
		border-radius: 16rpx;
		margin-bottom: 20rpx;
		position: relative;
		min-height: 190rpx;
		&:last-child{
			margin-bottom: 0;
		}
		.overDate{
			background: #aeaeae !important;
			.lqStatus{
				color: #AEAEAE !important;
			}
		}
		.itemLeft{
			padding: 20rpx;
			flex: 1;
			color: $pss-text-color3;
			position: relative;
			.icon-yishiyong{
				font-size: 100rpx;
				position: absolute;
				right: 30rpx;
				top: 70rpx;
				color: #AEAEAE;
				transform: rotate(-10deg);
			}
			.itemTit{
				font-size: 30rpx;
				font-weight:bold;
				margin-bottom:15rpx;
				.typeTag{
					background: #00C495;
					height: 40rpx;
					line-height: 40rpx;
					font-size: 24rpx;
					color: #fff;
					padding: 0 15rpx;
					margin-right: 10rpx;
					border-radius: 50rpx;
					display: inline-block;
					font-weight: normal;
				}
			}
			.validDate{
				font-size:26rpx;
				margin-bottom: 10rpx;
				.yxq{
					margin-right: 10rpx;
				}
				.tillTxt{
					margin: 0 10rpx;
				}
			}
			.otherInfo{
				color: $pss-text-color8;
				font-size: 22rpx;
				margin-bottom: 5rpx;
				&:last-child{
					margin-bottom: 0;
				}
			}
		}
		.cir{
			width: 16rpx;
			height: 16rpx;
			background: #F6F6F6;
			border-radius: 50%;
			position: absolute;
			right: 192rpx;
			&.rt{
				top: -8rpx;
			}
			&.rb{
				bottom:-8rpx
			}
		}
		.yhqPrice{
			width: 200rpx;
			// height: 200rpx;
			background:linear-gradient(270deg, #FFA510 0%, #40BC74 85.42%, #00C495 100%);
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			color:#fff;
			flex-shrink: 0;
			border-radius: 0 16rpx 16rpx 0;
			.price{
				font-size: 38rpx;
				font-weight: bold;
				.unit:first-child{
					font-weight: normal;
					font-size: 26rpx;
					margin-right: 5rpx;
				}
			}
			.xfPrice{
				font-size: 24rpx;
				margin: 10rpx 0 15rpx;
				opacity: .9;
			}
			.lqStatus{
				width: 130rpx;
				height: 42rpx;
				line-height: 42rpx;
				background: #fff;
				border-radius: 50rpx;
				color: #FFA510;
				font-size: 24rpx;
				text-indent: 20rpx;
				&.goLq{
					text-indent: 0;
					text-align: center;
				}
				&.hasChoice{
					background: $pss-bg-primary;
					color: $pss-text-colora;
				}
			}
		}
	}
</style>